<template>
  <div>
    <div class="divtools">
      <el-button type="primary" size="small" @click="dialogFormVisible = true">新增</el-button>
      <el-button type="primary" size="small" @click="deleteCategory">删除</el-button>
    </div>
    <div class="divDialog">
      <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" custom-class="diaglogClass">
        <CateGoryForm ref="CateGoryForm" @callback="handCloseForm"></CateGoryForm>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handSaveForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="divdrawer">
      <el-button @click="drawerClick" size="small" type="primary" style="margin-left: 56px;">
        点我打开
      </el-button>
      <el-drawer title="分类结构树" :visible.sync="drawer" direction="rtl" size="50%">
        <CateGoryTree></CateGoryTree>
      </el-drawer>
    </div>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item><span @click="handclick(0,-1)">类型</span> </el-breadcrumb-item>
        <el-breadcrumb-item v-for=" (item,index) in breadcrumbList" :key="index">
          <span @click="handclick(item.id,index)">{{item.name}}</span></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-table ref="categortTable" :data="tableData" highlight-current-row style="width: 100%"
      @selection-change="handleSelectionChange" @row-click="handleRowClick" border stripe size="small">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column property="Name" label="名称" width="220">
      </el-table-column>
      <el-table-column property="Code" label="代号" width="220">
      </el-table-column>
      <el-table-column property="Oreder" label="序号" width="80">
      </el-table-column>
      <el-table-column property="name" label="代号" width="120">
      </el-table-column>
      <el-table-column property="date" label="名称" width="120">
      </el-table-column>
      <el-table-column property="LastUpdateBy" label="更新人" width="120">
      </el-table-column>
      <el-table-column property="LastUpdateDate" label="更新时间" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="nextClick(scope.row)" type="text" size="small">下一级</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import CateGoryForm from './CategoryForm'
import CateGoryTree from './categorytree'
export default {
  components: {
    CateGoryForm,
    CateGoryTree
  },
  data() {
    return {
      drawer: false,
      dialogTitle: '新增类型',
      dialogFormVisible: false,
      tableData: [],
      currentRow: null,
      parentId: 0,
      breadcrumbList: [],
      multipleSelection: []
    }
  },
  methods: {
    getCategoryData() {
      const _this = this;
      var parm = { parentId: _this.parentId };

      this.$api.CategoryApi.GetCategoryList(parm).then(res => {
        if (res.Code) {
          _this.tableData = res.Result;
        }
      })
    },
    // 新增 保存
    handSaveForm() {
      this.$refs.CateGoryForm.submitclick(this.parentId);
    },
    // 新增 保存完毕 关闭 弹窗
    handCloseForm() {
      this.dialogFormVisible = false;
      // 刷新列表
      this.getCategoryData();
    },
    // 选中的数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 点击行触发，选中或不选中复选框
    handleRowClick(row, column, event) {
      this.$refs.categortTable.toggleRowSelection(row);
    },
    // 行内点击下一级
    nextClick(row) {
      if (this.parentId === row.Id) {
        return false;
      }
      this.parentId = row.Id;
      const item = { id: row.Id, name: row.Name };
      this.breadcrumbList.push(item);
      this.getCategoryData();
    },
    // 面包屑点击事件
    handclick(id, index) {
      this.parentId = id;
      var tempArr = this.breadcrumbList;
      this.breadcrumbList = [];
      for (let i = 0; i < tempArr.length; i++) {
        if (i <= index) {
          this.breadcrumbList.push(tempArr[i]);
        }
      };
      this.getCategoryData();
    },
    drawerClick() {
      this.drawer = true;
    },
    // 删除分类
    deleteCategory() {
      const _this = this;
      if (_this.multipleSelection.length === 0) { return false; };
      const ids = _this.multipleSelection.map(item => { return item.Id })
      var parm = { Ids: JSON.stringify(ids) };
      debugger;
      this.$api.CategoryApi.DeleteCategory(parm).then(res => {
        if (res.Code) {
          _this.getCategoryData();
        }
      })
    }
  },
  mounted() {
    this.getCategoryData();
  }

}

</script>
<style lang="less" scoped>
.el-dialog {
  position: relative;
  margin: 0 auto 50px;
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
}
</style>
<style>
.diaglogClass {
  width: 40%;
}
</style>
